<template>
  <div class="body">
    <!--车辆详情-->
    <el-popover
      ref="popover4"
      placement="top"
      width="auto"
      trigger="click">
      <div class="car_detail_dd">
        <!--信息介绍-->
        <div v-if="car_detail.length!=0" class="car_detail_dd_1">
            <img :src="car_detail.logo" alt="">
            <div>名称<span>{{car_detail.name}}</span></div>
            <div>官方指导价<span>{{car_detail.price}}</span></div>
            <div>年款<span>{{car_detail.yeartype}}</span></div>
            <div>生产状态<span>{{car_detail.productionstate}}</span></div>
            <div>销售状态<span>{{car_detail.salestate}}</span></div>
            <div>尺寸类型<span>{{car_detail.sizetype}}</span></div>
          <hr>
          <!--基本信息-->
            <div>商家报价<span>{{car_detail.basic.saleprice}}</span></div>
            <div>保修政策<span>{{car_detail.basic.warrantypolicy}}</span></div>
            <div>车船税减免<span>{{car_detail.basic.vechiletax}}</span></div>
            <div>排量(L)<span>{{car_detail.basic.displacement}}</span></div>
            <div>变速箱<span>{{car_detail.basic.gearbox}}</span></div>
            <div>综合工况油耗(L/100km)<span>{{car_detail.basic.comfuelconsumption}}</span></div>
            <div>网友油耗(L/100km)<span>{{car_detail.basic.userfuelconsumption}}</span></div>
            <div>官方0-100公里加速时间(s)<span>{{car_detail.basic.officialaccelerationtime100}}</span></div>
            <div>实测0-100公里加速时间(s)<span>{{car_detail.basic.testaccelerationtime100}}</span></div>
            <div>最高车速(km/h)<span>{{car_detail.basic.maxspeed}}</span></div>
            <div>乘员人数（区间）(个)<span>{{car_detail.basic.seatnum}}</span></div>
          <hr>
          <!--发动机-->
            <div>发动机位置<span>{{car_detail.engine.position}}</span></div>
            <div>发动机型号<span>{{car_detail.engine.model}}</span></div>
            <div>排量(L)<span>{{car_detail.engine.displacement}}</span></div>
            <div>排量(mL)<span>{{car_detail.engine.displacementml}}</span></div>
            <div>进气形式<span>{{car_detail.engine.intakeform}}</span></div>
            <div>气缸排列型式<span>{{car_detail.engine.cylinderarrangetype}}</span></div>
            <div>气缸数(个)<span>{{car_detail.engine.cylindernum}}</span></div>
            <div>每缸气门数(个)<span>{{car_detail.engine.valvetrain}}</span></div>
        </div>
        <div>

        </div>
      </div>
    </el-popover>
    <!--导航-->
    <el-breadcrumb id="arrow" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><span @click="go_histroy()">品牌车型</span></el-breadcrumb-item>
      <el-breadcrumb-item>车型</el-breadcrumb-item>
      <!--<el-breadcrumb-item>活动详情</el-breadcrumb-item>-->
    </el-breadcrumb>
    <!--车辆详细信息-->
    <!--车型列表-->
      <div v-loading="loading"
           element-loading-text="拼命加载中"
           v-popover:popover4
           class="car_detail_body">
        <div class="car_detail"  @click="car(v.id)"   v-for=" v in carDetail">
          <img :src="v.logo" alt="">
          <hr class="hr">
          <div class="d1">{{v.name}}</div>
          <div class="d2">{{v.price}}</div>
          <div class="d3">{{v.sizetype}}</div>
          <div class="d4">{{v.salestate}}</div>
          <div class="d5">{{v.productionstate}}</div>
        </div>
      </div>


  </div>



</template>

<style scoped>
  .body{
   // border: 1px solid red;
    height: auto;
    width: 1300px;
    margin: 5% auto;
  }
  #arrow{
    font-size: 20px;
  }
  .car_detail_body{
    //border: 1px solid red;
    width: 1300px;
    height: auto;
    margin-top: 50px;
    overflow:hidden;
  }
  .car_detail{
    width: 380px;
    height:420px;
    //border: 1px solid black;
    text-align: center;
    display: inline-block;
    line-height: 30px;
    margin-right: 40px;
   // margin-bottom: 40px;
    margin-top: 40px;
    float: left;
    box-sizing: border-box;
    transition: all 1s;
    margin-left: 10px;
  }
  .car_detail img{
    height: 220px;
    width: 300px;
    margin-top: 10px;
    border-radius: 10px;
  }
  .car_detail:hover{
    //border: 1px solid #b4bccc;
    //border-radius: 2px;
    cursor: pointer;
    //transform: rotate(360deg);
    transform: translate(0,-30px);
    background: #F8F8F8;
    box-shadow: 0 0 10px #888888;
    border-radius: 10px;
  }
  .d1{
    font-size: 16px;
    color: #333333;
  }
  .d2{
    color: red;
  }
  .d3, .d4, .d5{
    color: cadetblue;
  }
  .car_detail_dd{
    //border: 1px solid rebeccapurple;
    width:600px;
    height: auto;

  }
  .car_detail_dd img{
    margin-top: 10px;
    margin-left: 10%;
    border-radius: 5px;
    margin-bottom: 20px;
  }
  .car_detail_dd div{
    margin-left: 10%;
    margin-right: 10%;
    font-size: 15px;
  }
  .car_detail_dd div span{
    display: inline-block;
    margin-left: 20px;
    color: rebeccapurple;
    font-size: 15px;
  }
  .hr{
    width: 300px;
  }



</style>

<script>
  import axios from 'axios';
  export default {
    data(){
      return{
        carDetail:[],
        loading:true,
        car_detail:{
          basic:{},
          engine:{},
        },
      }
    },
    created(){
      let url='https://www.dragonjun.com/jersey/api/query/get_car';
      let data=JSON.stringify({"type":"3","parentid":this.$route.params.id,"carid":"2571"});
      axios.post(url,data,{
        headers: {
        'Content-Type': 'application/json',
        }
      }).then((data)=>{
        //console.log(data);
        this.carDetail=data.data.data.result.list;
        this.loading=false;
       // console.log(this.carDetail);
      }).catch((error)=>{
        console.log(error);
      });

    },
    methods:{
      go_histroy(){
        window.history.go(-1);
      },
      car(id){
        //读取数据
        let url='https://www.dragonjun.com/jersey/api/query/get_car';
        let data=JSON.stringify({"type":"4","parentid":this.$route.params.id,"carid":id});
        axios.post(url,data,{
          headers: {
            'Content-Type': 'application/json',
          }
        }).then((data)=>{
          //console.log(data);
          this.car_detail=data.data.data.result;
          //console.log(this.car_detail);
          // console.log(this.carDetail);
        }).catch((error)=>{
          console.log(error);
        });
      }
    }

  }

</script>



